Pie Chart হলো একটি গোলাকার গ্রাফ যা একটি ডেটাসেটের বিভিন্ন অংশের তুলনা করতে সাহায্য করে। এর মধ্যে Exploded Pie Chart এবং Sliced Pie Chart দুটি জনপ্রিয় কৌশল যা একটি নির্দিষ্ট সেগমেন্টকে আলাদা করে উপস্থাপন করে, যাতে সেটি আরও স্পষ্টভাবে দেখা যায়। Google Charts এ এগুলো তৈরি করা বেশ সহজ।
১. Exploded Pie Chart তৈরি করা
Exploded Pie Chart এমন একটি চার্ট, যেখানে একটি বা একাধিক সেগমেন্ট অন্যান্য সেগমেন্ট থেকে আলাদা করে দেখানো হয়। এটি ডেটার একটি বিশেষ অংশের দিকে ব্যবহারকারীদের দৃষ্টি আকর্ষণ করতে ব্যবহৃত হয়।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exploded Pie Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'pie']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Amount'],
['Food', 45],
['Rent', 25],
['Utilities', 15],
['Entertainment', 10],
['Others', 5]
]);
var options = {
title: 'Monthly Expenses',
slices: {
0: {offset: 0.1}, // Exploding the "Food" slice
1: {offset: 0.1} // Exploding the "Rent" slice
}
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Exploded Pie Chart Example</h2>
<div id="pie_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- স্লাইস অপশন (Slices option): এখানে
slicesঅবজেক্টের মাধ্যমেoffsetপ্রোপার্টি ব্যবহার করে "Food" এবং "Rent" সেগমেন্টগুলো আলাদা করে উপস্থাপন করা হয়েছে।offset: 0.1মানে সেগমেন্টটি পিজের মধ্যে 10% বেরিয়ে আসবে। - Exploded effect: আপনি যেকোনো সেগমেন্টকে আলাদা করে বের করে দেখতে পারেন, যা ডেটার গুরুত্ব বুঝতে সাহায্য করে।
২. Sliced Pie Chart তৈরি করা
Sliced Pie Chart এর মাধ্যমে, আপনি Pie Chart এর নির্দিষ্ট সেগমেন্টগুলিকে কাটা বা ভাগ করতে পারেন, যাতে সেগমেন্টগুলো আরও স্পষ্টভাবে প্রদর্শিত হয়। এটি Pie Chart এর বিভিন্ন অংশের অবদানকে সহজে বিশ্লেষণ করতে সাহায্য করে।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sliced Pie Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'pie']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Amount'],
['Food', 45],
['Rent', 25],
['Utilities', 15],
['Entertainment', 10],
['Others', 5]
]);
var options = {
title: 'Monthly Expenses',
slices: {
2: {offset: 0.2}, // Slicing the "Utilities" slice
3: {offset: 0.2} // Slicing the "Entertainment" slice
}
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Sliced Pie Chart Example</h2>
<div id="pie_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- Sliced effect: এখানে আমরা
slicesঅপশন ব্যবহার করে "Utilities" এবং "Entertainment" সেগমেন্টগুলোকে স্লাইস করেছি, যা চিত্রে সেগুলোকে আলাদা এবং স্লাইসড দেখাবে। - offset: 0.2: এটি সেগমেন্টগুলোকে 20% আলাদা করে দেখানোর জন্য ব্যবহৃত হয়।
Exploded এবং Sliced Pie Chart এর মধ্যে পার্থক্য
- Exploded Pie Chart: এক বা একাধিক সেগমেন্টকে আলাদা করে বের করা হয়। এটি ডেটার গুরুত্ব বা বিশেষ অংশের দিকে দৃষ্টি আকর্ষণ করার জন্য ব্যবহৃত হয়।
- Sliced Pie Chart: সেগমেন্টগুলোকে স্লাইস করা হয়, যা প্রতিটি অংশের অবদান আরও স্পষ্টভাবে দেখানোর জন্য ব্যবহৃত হয়।
উপসংহার
Exploded Pie Chart এবং Sliced Pie Chart দুটি কৌশল ডেটার বিশেষ সেগমেন্ট বা অংশকে আলাদা করে প্রদর্শন করতে সাহায্য করে, যা ভিজ্যুয়ালাইজেশনে আরও স্পষ্টতা আনে। Google Charts এ এই কৌশলগুলি খুব সহজেই প্রয়োগ করা যায়, যা ডেটাকে আরও কার্যকরী এবং বোঝার সহজ করে তোলে।
Read more
